<template>
	<view>
		<view class="position-fixed-cover bg-dark-mask"
		:style="{'visibility': visible ? 'visible' : 'hidden'}"
		@tap="hide"></view>
		<view class="volume-control position-fixed y-flex y-justify-end y-align-center trans-all trans-300 border-1 border-color-eee"
		@touchstart="clearTimer"
		@touchend="startTimer"
		@touchcancel="startTimer"
		:style="[sliderStyle]">
			<view class="active position-absolute left-0 right-0 bottom-0"
			:style="{
				'height': activeHeight + 'px'
			}"></view>
			<com-icon name="music_fill" color="#fff" size="45"></com-icon>
			<slider
			class="slider"
			:value="progress"
			min="0"
			max="100"
			@change="handleChange"
			@changing="handleChanging"
			:block-size="width"
			:style="{
				'top': activeTop + 'px',
				'width': height + 'px'
			}" />
		</view>
	</view>
</template>

<script>
	import { setVolume, getVolume } from '@/assets/js/native.js'
	export default {
		props: {
			value: {
				type: [String, Number],
				default: 0
			}
		},
		computed: {
			progress () {
				return this.volume * 100
			},
			activeHeight () {
				return this.volume * this.height
			},
			activeTop () {
				return (this.height / 2) - (this.width / 2)
			},
			translateX () {
				return this.visible ? 0 : this.width + (2 * this.dockGap)
			},
			activeRadiusRate () {
				return 1 - (15 / this.height)
			},
			sliderStyle () {
				const style = {
					'width': this.width + 'px',
					'height': this.height + 'px',
					'transform': 'translateX(' + (this.dock == 'left' ? '-' : '') + this.translateX + 'px)'
				}
				style[this.dock] = this.dockGap + 'px'
				const verticalName = ['center', 'top'].includes(this.vertical) ? 'top' : 'bottom'
				const value = ['bottom', 'top'].includes(this.vertical) ? 100 : (this.windowHeight / 2) - (this.height / 2)
				style[verticalName] = value + 'px'
				return style
			}
		},
		data () {
			return {
				width: 70,
				height: 280,
				dockGap: 30,//左右停靠距离
				volume: getVolume(),
				windowHeight: uni.getSystemInfoSync().windowHeight,
				visible: false,
				duration: 3000,//显示时长
				dock: 'right',//左右停靠位置
				vertical: 'center'//上下位置
			}
		},
		beforeDestroy() {
			this.clearTimer()
		},
		methods: {
			show (vertical) {
				this.clearTimer()
				this.vertical = vertical || 'center'
				this.$nextTick(() => {
					this.volume = getVolume()
					this.visible = true
					this.$emit('show')
					this.timer = setTimeout(() => {
						this.hide()
					}, this.duration)
				})
			},
			hide () {
				this.clearTimer()
				this.visible = false
				this.$emit('hide')
			},
			startTimer () {
				this.clearTimer()
				this.timer = setTimeout(() => {
					this.hide()
				}, this.duration)
			},
			clearTimer () {
				if ( this.timer ) {
					clearTimeout(this.timer)
					this.timer = null
				}
			},
			handleChange (e) {
				setVolume(e.detail.value / 100);
				this.volume = getVolume();
				this.$emit('change', this.volume)
				this.$emit('input', this.volume)
			},
			handleChanging (e) {
				this.volume = e.detail.value / 100
			}
			
		}
	}
</script>

<style>
	.volume-control {
		background-color: rgba(0,0,0,.4);
		padding: 20px 0;
	}
	.volume-control .active {
		background-color: #ddd;
	}
	.volume-control .slider {
		transform-origin: center center;
		transform: rotateZ(-90deg);
		position: absolute;
		opacity: 0;
	}
</style>